<p>hello works!</p>
<p>{{name}}</p>
<div [id]="'box'">属性绑定</div>
<div [id]="box">属性绑定</div>

<div></div>
<p [class] = "'item'">class绑定</p>
<p [class] = "itemClass">class绑定</p>

<h3 [id] = "'h3-dom'">hello{{ 1+1}}</h3>

<h3 [class.h3-dom] = "true">hell o{{ 1+1}}</h3>

<h3 [class]="h3Class">多类名绑定</h3>
<div [id]="'box'  ">属性绑定</div>

<h3 [class]="{'h3-dom':false, 'title-dom':true}">多类名条件渲染绑定</h3>

<h3 [class]="['h3-dom','title-dom']">数组渲染绑定</h3>

<h3 [ngClass]="{'active': isActive}">ngclass</h3>


<!-- 样式绑定 -->

<h3 [style.width]="'500px'">单一样式绑定</h3>

<h3 [style.color]="'red'">单一样式绑定</h3>

<h3 [style.width.px]="'500'">单一样式绑定</h3>

<h3 [style]="{'background':'red','color':'#fff'}">多样式绑定 对象</h3>
<h3 [style]="'background:red;color:#fff'">多样式绑定 字符串</h3>

<h3 [ngStyle]="{'color': 'red'}">ngStyle</h3>




<!-- 区别 -->
<div [style.color]="'red'" [style.fontSize.px]="fontSize">This is red text</div>

<div [class.active]="isActive" [class.special]="isSpecial">This element has dynamic classes</div>



<!-- 条件判断 -->
 <div *ngIf="isActive">isActive=true</div>
 <div *ngIf="!isActive">isActive=false</div>
<div>
<!--  通过input事件返回对象-->
  <button (click)="clickFun($event)">hello</button>
  <input #userName type="text" (input)= "inputFun($event)" name="" id="">
  <button (click)="getUerName(userName.value)">获取username</button>
</div>


<div #box>
  <input #userName type="text" name="" id="">
  <button></button>
</div>
<button (click)="getUerName(userName.value)">获取username</button>


<!--双向绑定-->
<hr>
<input [(ngModel)]="title" type="text">
<p>title:{{title}}</p>
